<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="/WEB-INF/jsp/head.jsp" />
<style type="text/css">
.modalOverlay
{
    position: fixed;
    width: 300px;
    height: 300px;
    top: 200px;
    left: 200px;
    z-index: 150;
    background-image: url(images/loading.gif);
    background-repeat:no-repeat;
}

</style>
<script type="text/javascript">
	function choiceCity(city) {

		$("body").append('<div class="modalOverlay">Loading...</div>');
		
		var link = "userStory15Servlet?query=2&city=" + city;

		$('#tabDetail').empty();
		$('#tabDetail').append('<table border="1" width="400px" />');
		$('#tabDetail table').append('<tr><th>CEP</th><th>Quantidade</thd></tr>');

		$.getJSON(link, function(data) {
			$.each(data.por_cep, function(key, val) {
				var CEP = val.localidade_zip;
				var qtd = val.zip_total;
				
				$('#tabDetail table').append('<tr><td>' + CEP + '</td><td>' + qtd +'</td></tr>' );
				//return false;
			});

		});
		
		link = "userStory14Servlet?city=" + city;
		
		$('#tabDetail2').empty();
		$('#tabDetail2').append('<table border="1" width="400px" />');
		$('#tabDetail2 table').append('<tr><th>Tipo fraude</th><th>%</thd></tr>');
		$.getJSON(link, function(data) {
			$.each(data.estatistica, function(key, val) {
				var fraude_type = val.fraude_type;
				var porcentagem = val.porcentagem;
				
				$('#tabDetail2 table').append('<tr><td>' + fraude_type + '</td><td>' + porcentagem +'</td></tr>' );
				//return false;
			});

		});
		
		var link2 = "userStory15Servlet?query=3&city=" + city;

		$('#tabDetail3').empty();
		$('#tabDetail3').append('<table border="1" width="800px" />');
		$('#tabDetail3 table').append('<tr><th>trans_id</th><th>trans_type</th><th>trans_price</th><th>trans_data</th><th>fraude_type</th><th>fraude_forma_deteccao</th></tr>');
		$.getJSON(link2, function(data) {

			$.each(data.detalhado, function(key, val) {
				
				$.each(val.fraudes, function(key, val) {
					var trans_id = val.trans_id;
					var trans_type = val.trans_type;
					var trans_price = val.trans_price;
					var trans_data = val.trans_data;
					var fraude_type = val.fraude_type;
					var fraude_forma_deteccao = val.fraude_forma_deteccao;
					
					$('#tabDetail3 table').append('<tr><td>' + trans_id + '</td><td>' + trans_type +'</td><td>' + trans_price + '</td><td>' + trans_data + '</td><td>' + fraude_type + '</td><td>' + fraude_forma_deteccao + '</td></tr>' );
					//return false;
				});
		
			});

			$('.modalOverlay').remove();

		});
	}
</script>

<script type="text/javascript">

	$(document).ready(
			function() {
				//define titulo da pagina
				$("#divTitle").html(
						"UserStory 15 - Agrupamento de Fraudes por Região");

				$("#btnPesq").click(function() {
					$('#tab').empty();
					var link = "userStory15Servlet?query=1";
					//"userStory14Servlet?country=" + pais + "&state=" + estado + "&city=" + cidade + "&dtIni=" + datIni + "&dtFin=" + datFim;

					$('#tab').append('<table border="1" width="400px" />');
					$('#tab table').append('<tr><th>Cidade</th><th>Quantidade</thd></tr>');
					$.getJSON(link, function(data) {
						$.each(data.cidades, function(key, val) {
							var city = val.localidade_city;
							var qtd = val.city_total;
							
							$('#tab table').append('<tr><td><a href="javascript:void(0)" onclick="choiceCity(&#39;' + city + '&#39;);">' + city + '</a></td><td>' + qtd +'</td></tr>' );
							//return false;
						});

					});

				});
				

			});
</script>

</head>
<body>

<div id="carregando" style="display:none; color: green;">Carregando…</div>
<br>
<div id="destino"></div>

	<jsp:include page="/WEB-INF/jsp/cabecalhoScaf.jsp" />
	<form method="POST">
		<br>
		<input type="button" value="Relatório" id="btnPesq">
	</form>
	<table>
		<tr>
			<td><div id="tab" style="width: 800px;"></div></td>
		</tr>
		<tr>
			<td><div id="tabDetail" style="width: 800px;"></td>
		</tr>
		<tr>
			<td><div id="tabDetail2" style="width: 800px;"></td>
		</tr>
		<tr>
			<td><div id="tabDetail3" style="width: 800px;"></td>
		</tr>				
	</table>
</body>
</html>